import { useState, useEffect } from "react";
import { isValidProductCardData } from "../utils/cardUtils";

export default function ProductCardMobile({ data }: { data?: any }) {
  const [productData, setProductData] = useState<any | null>(data || null);
  const [loading, setLoading] = useState(false);

  // 简化数据处理逻辑，只处理传入的data
  useEffect(() => {
    if (data) {
      setProductData(data);
      setLoading(false);
    } else {
      // 如果没有data，设置为null，避免重复请求
      setProductData(null);
      setLoading(false);
    }
  }, [data]);

  if (loading) {
    return (
      <div className="product-card-mobile__container">
        <div className="product-card-mobile__loading">加载中...</div>
      </div>
    );
  }

  // 当没有有效数据时，直接返回null隐藏卡片
  if (!isValidProductCardData(productData)) {
    return null;
  }

  // 只取近一月、近三月、近六月
  const extraYields = productData!.yield_history.filter((item: any) => ["近1个月", "近三月", "近六月", "近3个月", "近6个月"].includes(item.name));

  return (
    <div className="product-card-mobile__container">
      {/* 顶部标签区 */}
      <div className="product-card-mobile__top-row" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
        {/* <span className="product-card-mobile__industry">{productData!.industry}</span> */}
        <span className="product-card-mobile__risk">{productData!.risk_level}</span>
      </div>

      {/* 基金名称 */}
      <div className="product-card-mobile__fund-info">
        <div className="product-card-mobile__fund-name">
          {productData!.fund_name}（{productData!.fund_code}）
        </div>
      </div>

      {/* 收益区 */}
      <div className="product-card-mobile__yield-row">
        <div>
          <div className="product-card-mobile__annual-return" style={{ color: parseFloat(productData!.yield) >= 0 ? '#dc2626' : '#16a34a' }}>
            {productData!.yield ? (parseFloat(productData!.yield) > 0 ? '+' : '') + productData!.yield + '%' : '--'}
          </div>
        </div>
        <div className="product-card-mobile__yield-side">
          {productData!.yield_name || '收益率'}
        </div>
      </div>

      {/* 多年涨幅 */}
      <div className="product-card-mobile__extra-info-row">
        {extraYields.map((item: any) => (
          <span key={item.name} className="product-card-mobile__extra-item-row">
            {item.name}：
            <span style={{ color: parseFloat(item.yield) >= 0 ? '#dc2626' : '#16a34a', fontWeight: 500 }}>
              {item.yield ? (parseFloat(item.yield) > 0 ? '+' : '') + item.yield + '%' : '--'}
            </span>
          </span>
        ))}
      </div>

      {/* 操作按钮 */}
      <button
        className="product-card-mobile__buy-btn"
        onClick={() => console.log('购买产品:', productData!.fund_name)}
      >
        去买一笔
      </button>

      {/* 响应式样式 */}
      <style>{`
        .product-card-mobile__container {
          background: #fff;
          border-radius: 12px;
          padding: 16px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
          max-width: 420px;
          margin: 0 auto 16px auto;
          font-family: PingFang SC, Arial, sans-serif;
          box-sizing: border-box;
        }
        .product-card-mobile__top-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
        }
        .product-card-mobile__industry {
          background: #f0f9ff;
          color: #0369a1;
          padding: 4px 10px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
        }
        .product-card-mobile__risk {
          background: #fef3c7;
          color: #92400e;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
        }
        .product-card-mobile__fund-info {
          margin-bottom: 8px;
        }
        .product-card-mobile__fund-name {
          font-size: 16px;
          font-weight: 600;
          color: #1f2937;
          text-align: left;
        }
        .product-card-mobile__yield-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f9fafb;
          border-radius: 8px;
          padding: 14px 10px;
          margin-bottom: 12px;
          flex-wrap: wrap;
        }
        .product-card-mobile__annual-return {
          font-size: 20px;
          font-weight: 700;
        }
        .product-card-mobile__annual-label {
          font-size: 11px;
          color: #6b7280;
          margin-top: 2px;
        }
        .product-card-mobile__yield-side {
          font-size: 13px;
          color: #6b7280;
        }
        .product-card-mobile__extra-info-row {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          font-size: 12px;
          color: #6b7280;
          margin-bottom: 8px;
          align-items: center;
        }
        .product-card-mobile__extra-item-row {
          display: flex;
          align-items: center;
        }
        .product-card-mobile__buy-btn {
          width: 100%;
          background: #3b82f6;
          color: white;
          border: none;
          border-radius: 8px;
          padding: 14px 0;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          margin-top: 6px;
          transition: background-color 0.2s;
        }
        .product-card-mobile__buy-btn:hover,
        .product-card-mobile__buy-btn:active {
          background: #2563eb;
        }
        .product-card-mobile__loading {
          text-align: center;
          color: #666;
          font-size: 14px;
        }
        @media (max-width: 600px) {
          .product-card-mobile__container {
            padding: 10px;
            max-width: 100vw;
            border-radius: 0;
            box-shadow: none;
          }
          .product-card-mobile__yield-row {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px 6px;
          }
          .product-card-mobile__extra-info-row {
            flex-direction: column;
            gap: 2px;
          }
        }
      `}</style>
    </div>
  );
} 